<template>
  <div class="container">
    <div class="top">
      <swiper height="4.2rem" :auto="true" :loop="true" dots-position="center" :interval=3000>
        <swiper-item v-if="details.videoUrl">
          <video-player v-if="details.videoUrl"
                        class="video-player vjs-custom-skin"
                        ref="videoPlayer"
                        :playsinline="false"
                        :options="playerOptions"
                        @play="onPlayerPlay($event)"
                        @pause="onPlayerPause($event)"
          ></video-player>
        </swiper-item>
        <swiper-item :key="index" @click.native="show(index)" v-for="(item,index) in banner">
          <img class="img_item" :src="item.url" alt="">
        </swiper-item>
      </swiper>
      <div class="top_desc flex-row flex-y-center">
        {{details.titleDesc}}
      </div>
    </div>
    <div class="details_box">
      <div class="houseInfo flex-row">
        <div class="flex-grow-1 ">
          <div class="tt">售价</div>
          <div class="data">{{details.totalPrice}}万</div>
        </div>
        <div class="flex-grow-1 huxing">
          <div class="tt">户型</div>
          <div class="data">{{details.jifang}}</div>
        </div>
        <div class="flex-grow-1">
          <div class="tt">面积</div>
          <div class="data">{{details.AreaStr}}㎡</div>
        </div>
      </div>
      <div class="base-info-content">
        <div style="margin-bottom: .2rem;" class="flex-row flex-y-center">
          <div class="title_b flex-grow-1">
            基本信息
          </div>
          <div style="color:#90969d" class="flex-grow-1 flex-right flex-y-center">
            {{details.update_time | oddsRide}} 发布
          </div>
        </div>
        <ul class="clearfix">
          <li class="base-info-li">单价：<span>{{details.dan_price}}元/㎡</span></li>
          <li class="base-info-li">朝向：<span>{{details.chaoxiang}}</span></li>
          <li class="base-info-li">楼层：<span>{{details.louceng}}</span></li>
          <li class="base-info-li">装修：<span>{{details.zhungxiu_type}}</span></li>
          <li class="base-info-li">类型：<span>普通住宅</span></li>
          <li class="base-info-li">年代：<span>{{details.niandai}}年</span></li>
          <li class="base-info-li info-default">小区：<span style="color:#f56c6c">
            {{details.Community}}　<span style="color:#999">({{details.quxian | toFixed}})</span>
          </span>
          </li>
          <li class="base-info-li">房贷计算：<a :href="jisuanqi">》》》</a></li>
          <!--<li  class="base-info-li"><a-->
          <!--href="https://tool.fooww.com/calculator/mobile/?price=56&amp;themeColor=3492e9"><span>房贷计算器</span>-->
          <!--</a></li>-->
          <!--<li class="base-info-li">区县：<span>{{details.quxian}}</span></li>-->
          <!--<li class="base-info-li">车库：<span v-if="details.cheku">有</span><span v-else>无</span>-->
          <!--</li>-->
        </ul>
        <div class="detail-tags list-style">
        </div>
      </div>
    </div>
    <div class="" style="margin-bottom: .2rem">
      <a href="tel:18971966446">
        <img v-src="'/static/img/index/ad1.jpg'" alt="">
      </a>
    </div>
    <div class="info-description" v-html="details.description">

    </div>
    <div v-show="likeList.length>0 && likeList" class="likeHouse flex-row flex-y-center vux-1px-b">
      <span>相似房源</span>
    </div>

    <div @click="maskSwiperClick" :class="{'full_bg2':showSwiper}" class="swiper-position">

      <swiper class="swiper-content" v-model="swiperIndex" height="10rem" :loop="true" dots-position="center">
        <swiper-item :key="index" v-for="(item,index) in banner">
          <img class="img_item" :src="item.url" alt="">
        </swiper-item>
      </swiper>

    </div>


    <house-list @click.native="toDetails(item.id)" v-show="index<4" :item="item" :key="index"
                v-for="(item,index) in likeList"></house-list>

    <div @click="showWx=false" :class="{'full_bg2':showWx}" class="swiper-position">
      <div style="position: absolute;top:0.8rem;width:100%;text-align: center;left: 0;color:#fff;font-size:0.3rem">
        长按二维码识别
      </div>
      <img class="swiper-content2" v-src="'/static/img/contact.jpg'" alt="">
    </div>

    <div class="bottom_box flex-row">
      <div class="buyUserInfo flex-grow-0 flex-y-center">
        <div class="userBox flex-grow-0">
          <img class="userImg" v-src="'/static/img/lin.jpg'" alt="">
        </div>
        <div class="flex-grow-1 userBox-right">
          <!--<p style="color:#1f232a;font-size: .28rem;">林经理</p>-->
          <!--<p style="color: #8c939a;font-size: .22rem" class="oneLine">瑞祥房产代理有限公司</p>-->
          <p style="color:#fff;font-size: .28rem;">林经理</p>
          <p style="color: #fff;font-size: .22rem" class="oneLine">瑞祥房产代理有限公司</p>
        </div>
      </div>
      <!--<div @click="showWx=true" class="contact flex-grow-1 flex-y-center flex-x-center">微信</div>-->
      <a style="color: #fff" href="tel:18971966446" class="phone flex-grow-1 flex-y-center flex-x-center">
        <img style="width: .4rem;margin-right: .1rem" v-src="'/static/img/phone.png'" alt="">咨询电话
      </a>
    </div>

  </div>
</template>

<script>
  import MDUtils from 'src/assets/js/md-utils'
  import HouseList from 'src/components/houseList'
  import {videoPlayer} from 'vue-video-player';
  import {URI_GETHOUSEDETAILS, URI_GETSMALLHOUSELIST, GETWXCONFIG} from 'src/const/shareUri'
  import wx from 'weixin-js-sdk'
  import {Swiper, SwiperItem} from 'vux'

  export default {
    name: "HouseDetails",
    components: {Swiper, SwiperItem, HouseList, videoPlayer},
    data() {
      return {
        banner: [],
        details: {},
        likeList: [],
        swiperIndex: 0,
        showSwiper: false,
        showWx: false,
        jisuanqi: '',
        html: "<h3><pre宋体';font-size:13.5pt;\"><span style=\"font-weight: bold;\"></span></pre宋体';font-size:13.5pt;\">核心卖点</h3><p><pre宋体';font-size:13.5pt;\">面积：<spanconsolas';\">137.41平<br>  户型：三室两厅，南北通透，全明设计<br>  楼层：<spanconsolas';\">7/7楼 楼层 采光好<br>  装修：精装修 房子保养得很好 拎包入住<br>  地段：小区位于建设路集贸市场<br>  产权：产权清晰 产证在手满四<br>  此房位于高楼层，楼梯平缓，踏步较少，得房率较高，分摊少。户型方正，赠送的面积较多，功能型住房<spanconsolas';\">.</spanconsolas';\"></spanconsolas';\"></spanconsolas';\"></pre宋体';font-size:13.5pt;\"></p><h3><pre宋体';font-size:13.5pt;\"><spanconsolas';\"><spanconsolas';\"><spanconsolas';\"><pre宋体';font-size:13.5pt;\">业主心态</pre宋体';font-size:13.5pt;\"></spanconsolas';\"></spanconsolas';\"></spanconsolas';\"></pre宋体';font-size:13.5pt;\"></h3><div><pre宋体';font-size:13.5pt;\"><spanconsolas';\"><spanconsolas';\"><spanconsolas';\"><pre宋体';font-size:13.5pt;\"><pre宋体';font-size:13.5pt;\">业主心态 业主个人原因，低价诚心出售此房，可随时办理过户手续！</pre宋体';font-size:13.5pt;\"></pre宋体';font-size:13.5pt;\"></spanconsolas';\"></spanconsolas';\"></spanconsolas';\"></pre宋体';font-size:13.5pt;\"></div><h3><pre宋体';font-size:13.5pt;\"><spanconsolas';\"><spanconsolas';\"><spanconsolas';\"><pre宋体';font-size:13.5pt;\"><pre宋体';font-size:13.5pt;\"><pre宋体';font-size:13.5pt;\">小区配套</pre宋体';font-size:13.5pt;\"></pre宋体';font-size:13.5pt;\"></pre宋体';font-size:13.5pt;\"></spanconsolas';\"></spanconsolas';\"></spanconsolas';\"></pre宋体';font-size:13.5pt;\"></h3><div><pre宋体';font-size:13.5pt;\"><spanconsolas';\"><spanconsolas';\"><spanconsolas';\"><pre宋体';font-size:13.5pt;\"><pre宋体';font-size:13.5pt;\"><pre宋体';font-size:13.5pt;\"><pre宋体';font-size:13.5pt;\">醇熟社区︱小区物业管理安全，停车方便安全，繁华地段，小区绿化面积大，环境优美</pre宋体';font-size:13.5pt;\"><br></pre宋体';font-size:13.5pt;\"></pre宋体';font-size:13.5pt;\"></pre宋体';font-size:13.5pt;\"></spanconsolas';\"></spanconsolas';\"></spanconsolas';\"></pre宋体';font-size:13.5pt;\"></div><h3><pre宋体';font-size:13.5pt;\"><spanconsolas';\"><spanconsolas';\"><spanconsolas';\"><pre宋体';font-size:13.5pt;\"><pre宋体';font-size:13.5pt;\"><pre宋体';font-size:13.5pt;\"><pre宋体';font-size:13.5pt;\"><pre宋体';font-size:13.5pt;\">服务介绍</pre宋体';font-size:13.5pt;\"></pre宋体';font-size:13.5pt;\"></pre宋体';font-size:13.5pt;\"></pre宋体';font-size:13.5pt;\"></pre宋体';font-size:13.5pt;\"></spanconsolas';\"></spanconsolas';\"></spanconsolas';\"></pre宋体';font-size:13.5pt;\"></h3><div><pre宋体';font-size:13.5pt;\"><spanconsolas';\"><spanconsolas';\"><spanconsolas';\"><pre宋体';font-size:13.5pt;\"><pre宋体';font-size:13.5pt;\"><pre宋体';font-size:13.5pt;\"><pre宋体';font-size:13.5pt;\"><pre宋体';font-size:13.5pt;\"><pre宋体';font-size:13.5pt;\">瑞祥房产中介很高兴能为您提供优质的房源买卖服务，所推荐房源真实有效，本着诚实可信、客户至上的原则为您提供专业的服务，感谢您的关注，祝福您生活愉快！</pre宋体';font-size:13.5pt;\"><br></pre宋体';font-size:13.5pt;\"></pre宋体';font-size:13.5pt;\"></pre宋体';font-size:13.5pt;\"></pre宋体';font-size:13.5pt;\"></pre宋体';font-size:13.5pt;\"></spanconsolas';\"></spanconsolas';\"></spanconsolas';\"></pre宋体';font-size:13.5pt;\"></div><div><pre宋体';font-size:13.5pt;\"><spanconsolas';\"><spanconsolas';\"><spanconsolas';\"><pre宋体';font-size:13.5pt;\"><pre宋体';font-size:13.5pt;\"><pre宋体';font-size:13.5pt;\"><pre宋体';font-size:13.5pt;\"><pre宋体';font-size:13.5pt;\"><br></pre宋体';font-size:13.5pt;\"></pre宋体';font-size:13.5pt;\"></pre宋体';font-size:13.5pt;\"></pre宋体';font-size:13.5pt;\"></pre宋体';font-size:13.5pt;\"></spanconsolas';\"></spanconsolas';\"></spanconsolas';\"></pre宋体';font-size:13.5pt;\"></div>",
        playerOptions: {
//        playbackRates: [0.7, 1.0, 1.5, 2.0], //播放速度
          autoplay: false, //如果true,浏览器准备好时开始回放。
          muted: false, // 默认情况下将会消除任何音频。
          loop: false, // 导致视频一结束就重新开始。
          preload: 'auto', // 建议浏览器在<video>加载元素后是否应该开始下载视频数据。auto浏览器选择最佳行为,立即开始加载视频（如果浏览器支持）
          language: 'zh-CN',
          aspectRatio: '16:9', // 将播放器置于流畅模式，并在计算播放器的动态大小时使用该值。值应该代表一个比例 - 用冒号分隔的两个数字（例如"16:9"或"4:3"）
          fluid: true, // 当true时，Video.js player将拥有流体大小。换句话说，它将按比例缩放以适应其容器。
          isFullScreen: true,
          sources: [{
            type: "video/mp4",
            //src: url //你的视频地址（必填）
            src: ""
          }],
          poster: '', //你的封面地址
          width: document.documentElement.clientWidth,
          notSupportedMessage: '此视频暂无法播放，请稍后再试', //允许覆盖Video.js无法播放媒体源时显示的默认信息。
          controlBar: {
            timeDivider: true,
            durationDisplay: true,
            remainingTimeDisplay: false,
            fullscreenToggle: true  //全屏按钮
          }
        }
      }
    },
    created() {
      this.initData();
    },
    methods: {
      onPlayerPlay() {
      },
      onPlayerPause() {
      },
      initData() {
        this.$ajax.get(URI_GETHOUSEDETAILS, {
          id: MDUtils.getQueryParam('id')
        }, res => {
          console.log(res.data);
          this.banner = res.data.banner;
          this.details = res.data.details;
          this.playerOptions.poster = this.banner[0].url;
          this.playerOptions.sources[0].src = this.details.videoUrl;
          this.jisuanqi = `https://tool.fooww.com/calculator/mobile/?price=${this.details.totalPrice}&amp;themeColor=3492e9`;
          this.getLikeList();
          this.getConfig();
        });
      },
      getLikeList() {
        this.$ajax.get(URI_GETSMALLHOUSELIST, {
          type: 'like',
          huxing: this.details.jifang,
          id: MDUtils.getQueryParam('id')
        }, res => {
          console.log(res);
          this.likeList = res.data;
        });
      },
      getConfig() {
        //let url = location.href.split('#')[0] //获取锚点之前的链接
        this.$ajax.get(GETWXCONFIG, {
          url: encodeURIComponent(window.location.href)
        }, res => {
          this.wxInit(res)
        });
      },
      wxInit(res) {
        var that = this;
        wx.config({
          debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
          appId: res.appId, // 必填，企业号的唯一标识，此处填写企业号corpid
          timestamp: res.timestamp, // 必填，生成签名的时间戳
          nonceStr: res.nonceStr, // 必填，生成签名的随机串
          signature: res.signature,// 必填，签名，见附录1
          jsApiList: ['onMenuShareAppMessage', 'onMenuShareTimeline', 'onMenuShareQQ']
        });
        wx.ready(function () {
          let shareObj = {
            title: `在售 ${that.details.Community} ${that.details.jifang} ${that.details.totalPrice}万 ${that.details.AreaStr}㎡`,
            desc: '帮您找到合适的房源，为准备买房的您提供真诚的服务',
            link: window.location.href,
            imgUrl: that.banner[0].url
            //imgUrl: 'https://www.linqinghu.cn/ruixiang/static/img/ruixianglogo.jpg',
          };
          //分享给朋友
          wx.onMenuShareAppMessage(shareObj);
          //分享到朋友圈
          wx.onMenuShareTimeline(shareObj);
          //分享到QQ
          wx.onMenuShareQQ(shareObj);
        })
      },
      logIndexChange(arg) {
        console.log(arg)
      },
      show(index) {
        this.swiperIndex = index;
        this.showSwiper = true;
      },
      maskSwiperClick() {
        this.showSwiper = false;
      },
      toDetails(id) {
        let toUrl = document.URL.replace(/houseDetails/g, "houseDetails").split('?')[0];
        toUrl += '?id=' + id;
        //window.location.href = location.origin + '/houseDetails.html?id=' + id;
        window.location.href = toUrl
      },
    }
  }
</script>
<style>
  body {
    background: #ececec;
  }

  .info-description {
    padding: .24rem .36rem .38rem;
    color: #999;
    font-size: 14px;
    background: #fff;
  }

  .info-description h3 {
    font-size: .3rem;
    color: #3d4147;
    margin-top: 0.2rem;
    margin-bottom: .1rem;
  }

  .info-description img {
    width: 20px;
  }

  .info-description p {
    color: #1a1f26;
    line-height: 0.5rem;
    font-size: .28rem;
  }

  /*img{*/
  /**/
  /*}*/
</style>
<style lang="less" scoped>
  .container {
    padding-bottom: .98rem;
  }

  .swiper-position {
    perspective: 1000;
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background: #3a3a3a;
    z-index: 500;
    transition: opacity 0.3s 0s;
    opacity: 0;
    visibility: hidden;
    &.full_bg2 {
      opacity: 1;
      visibility: visible;
      .swiper-content, .swiper-content2 {
        transform: translate(-50%, -50%) scale(1);
      }
    }
    .swiper-content, .swiper-content2 {
      top: 50%;
      left: 50%;
      transition: 0.6s;
      transform: translate(-50%, -50%) scale(0.6);
      transform-style: preserve-3d;
    }
    .swiper-content2 {
      position: absolute;
    }
  }

  .top {
    /*padding: .2rem;*/
    background: #fff;
    .top_desc {
      padding: .35rem .4rem .2rem .3rem;
      font-size: .36rem;
      color: #2d3236;
      font-weight: bold;
    }
  }

  .img_item {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
  }

  .details_box {
    background: #fff;
    margin-top: .2rem;
    margin-bottom: .2rem;
    .houseInfo {
      text-align: center;
      padding: .3rem 0;
      border-bottom: 1px solid #eee;
      .huxing {
        border-left: 1px solid #eee;
        border-right: 1px solid #eee;
      }
      .tt {
        margin-bottom: .05rem;
        font-size: .28rem;
        color: #999;
      }
      .data {
        height: 16px;
        line-height: 16px;
        color: @red;
        font-size: .32rem;
        font-weight: bold;
      }
    }
    .base-info-content {
      padding: .24rem .36rem .38rem;
      .title_b {
        font-size: .3rem;
        color: #3d4147;
        font-weight: bold;
      }
      .base-info-li {
        float: left;
        width: 50%;
        height: 26px;
        line-height: 26px;
        font-size: 0.27rem;
        color: #999;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        &.info-default {
          width: 100%;
        }
        span {
          color: #1a1f26;
        }
      }

    }
  }

  .likeHouse {
    height: .78rem;
    font-size: 16px;
    font-weight: 700;
    color: #333;
    background: #fff;
    margin-top: .2rem;
    padding-left: .2rem;
  }

  .bottom_box {
    width: 100%;
    height: .9rem;
    position: fixed;
    background: #fff;
    bottom: 0;
    left: 0;
    font-size: 0.3rem;
    color: #fff;
    z-index: 10;
    .buyUserInfo {
      width: 3.6rem;
      padding-left: .27rem;
      background: linear-gradient(left, #fe9500, #ff7801);
      background: -webkit-gradient(linear, left top, right top, from(#fe9500), to(#ff7801));
      height: 100%;
      .userBox {
        width: .64rem;
        height: .64rem;
        border-radius: 50%;
        overflow: hidden;
        /*position: relative;*/
        /*.userImg{*/
          /*position: absolute;*/
          /*left:0.02rem*/
        /*}*/
      }
      .userBox-right {
        margin-left: .1rem;
      }
    }
    .contact {
      background: linear-gradient(left, #fe9500, #ff7801);
      background: -webkit-gradient(linear, left top, right top, from(#fe9500), to(#ff7801));
      height: 100%;
    }
    .phone {
      height: 100%;
      background: linear-gradient(left, #3cdc50, #3cba50);
      background: -webkit-gradient(linear, left top, right top, from(#3cdc50), to(#3cba50));
    }
  }
</style>